<template>
  <div class="alignment-toolbar">
    <a-space>
      <a-button @click="alignLeft">
        <template #icon><AlignLeftOutlined /></template>
        左对齐
      </a-button>
      <a-button @click="alignCenter">
        <template #icon><AlignCenterOutlined /></template>
        居中对齐
      </a-button>
      <a-button @click="alignRight">
        <template #icon><AlignRightOutlined /></template>
        右对齐
      </a-button>
      <a-button @click="alignTop">
        <template #icon><VerticalAlignTopOutlined /></template>
        顶部对齐
      </a-button>
      <a-button @click="alignMiddle">
        <template #icon><VerticalAlignMiddleOutlined /></template>
        垂直居中
      </a-button>
      <a-button @click="alignBottom">
        <template #icon><VerticalAlignBottomOutlined /></template>
        底部对齐
      </a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { useEditorStore } from '@/stores/editor';
import { AlignLeftOutlined, AlignCenterOutlined, AlignRightOutlined, VerticalAlignTopOutlined, VerticalAlignMiddleOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons-vue';

const editorStore = useEditorStore();

const alignLeft = () => {
  editorStore.alignComponents('left');
};

const alignCenter = () => {
  editorStore.alignComponents('center');
};

const alignRight = () => {
  editorStore.alignComponents('right');
};

const alignTop = () => {
  editorStore.alignComponents('top');
};

const alignMiddle = () => {
  editorStore.alignComponents('middle');
};

const alignBottom = () => {
  editorStore.alignComponents('bottom');
};
</script>

<style lang="less" scoped>
.alignment-toolbar {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
</style> 